<template>
  <div>
    <div class="gva-form-box">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <div class="box-subject">{{ formData.emailSubject }}</div>
            <div class="box-other">
              <span class="addrtitle">发件人：</span>
              {{ format_from_to(formData.emailFrom) }}
            </div>
            <div class="box-other">
              <span class="addrtitle">时&nbsp;&nbsp;&nbsp;&nbsp;间：</span>
              {{ formatDate(formData.emailDate) }}
            </div>
            <div class="box-other">
              <span class="addrtitle">收件人：</span>
              {{ format_from_to(formData.emailTo) }}
            </div>
          </div>
        </template>
        <div class="box-content">
          <div v-html="format_content_text(formData.emailContentHtml)"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EmailINBOX',
}
</script>

<script setup>
import {
  createEmailINBOX,
  updateEmailINBOX,
  findEmailINBOX,
} from '@/api/emailINBOX'

// 自动获取字典
import { getDictFunc } from '@/utils/format'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { formatDate } from '@/utils/format'
const route = useRoute()
const router = useRouter()
const type = ref('')
const formData = ref({
  emailId: 0,
  emailSubject: '',
  emailFrom: '',
  emailTo: '',
  emailDate: new Date(),
  emailContentText: '',
  emailContentHtml: '',
  attachment: '',
})

// 初始化方法
const init = async () => {
  // 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例
  if (route.query.id) {
    const res = await findEmailINBOX({ ID: route.query.id })
    console.log(
      '%c 🥃 res: ',
      'font-size:20px;background-color: #B03734;color:#fff;',
      res
    )
    if (res.code === 0) {
      formData.value = res.data.reemailINBOX
    }
  }
}

init()
const format_from_to = (email) => {
  const strs = email.split('-')
  if (strs[0].length === 0) {
    return strs[1] + ` <${strs[1]}>`
  }
  return strs[0] + ` <${strs[1]}>`
}
const percent2percent25 = (URI) => {
  if (URI.indexOf('%') > -1) {
    return URI.replace(/%/g, '%25')
  } else {
    return URI
  }
}
const format_content_text = (s) => {
  s = percent2percent25(s)
  s = window.decodeURIComponent(s)
  s = s.replace(/\\"/g, '"')
  s = s.replace(/\\'/g, "'")
  s = s.replace(/\\r?\\n/g, '')
  s = s.replace(/\\n/g, '')
  console.log(
    '%c 🥛 text: ',
    'font-size:20px;background-color: #6EC1C2;color:#fff;',
    s
  )
  return s
}
</script>

<style lang="scss" scoped>
.box-subject {
  font: bold 18px 'lucida Grande', Verdana, 'Microsoft YaHei';
  padding-bottom: 5px;
}
.addrtitle {
  color: #798699;
  font-size: 14px;
}
.box-other {
  margin-bottom: 5px;
}
.box-content {
  background-color: #eee;
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
